<template>
    <el-card class="form-container" shadow="never">
        <el-form
                :model="device"
                ref="bannerFrom"
                label-width="150px"
                size="small"
        >
            <el-form-item label="连接Ip:">
                <el-input v-model="device.serverIp" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="连接端口:">
                <el-input v-model="device.serverPort" class="input-width"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('bannerFrom')"
                >提交
                </el-button
                >
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
    import SingleUpload from "@/components/Upload/singleUpload";
    import {createDevice, updateDevice, getDevice,setIp} from "@/api/qsg/device";

    const defaultDevice = {
        deviceCode: '',
        machineName: '',
        area: ''
    };

    export default {
        name: "DeviceDetail",
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                device:{
                  serverIp:'',
                  serverPort:''
                }
            };
        },
        created() {
        },
        methods: {
            onSubmit(formName) {
              console.log(this.$route.query.ids)
              this.device.ids = this.$route.query.ids;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm("是否提交数据", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                          setIp(this.$route.query.ids,this.device).then(
                                (response) => {
                                    this.$refs[formName].resetFields();
                                    this.$message({
                                        message: "修改成功",
                                        type: "success",
                                        duration: 1000,
                                    });
                                    this.$router.back();
                                }
                            );
                        });
                    } else {
                        this.$message({
                            message: "验证失败",
                            type: "error",
                            duration: 1000,
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.device = Object.assign({}, defaultDevice);
            },
        },
    };
</script>
<style scoped>
    .input-width {
        width: 70%;
    }
</style>


